<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
</head>
<body>
<div>
    <h2>聊天室</h2>
    <input type="text" name="uid" id="uid">
    <input type="text" name="username" id="username">
    <button id="create">创建聊天室</button>
    <br>
    <input type="text" name="add_id" id="add_id">
    <button id="add">加入聊天室</button>
    <br>
    <input type="text" value="" name="msg" id="send_msg">
    <button id="send">发送</button>
    <br>
    <br>
    <br>
    <div>服务端返回：</div>
    <ul id="msg_list">
    </ul>
</div>
</body>
</html>

<script>
    var ws;
    var uid;
    var room_id;
    var username;
    function socket(id, uid, username) {
        // ws = new WebSocket("ws://localhost:8889/ws/v1/handle?room_id="+id);
        ws = new WebSocket("ws://localhost:8889/ws/v1/handle?uid="+uid+"&username="+username);
        //连接打开时触发
        ws.onopen = function(evt) {
            console.log("连接打开 ...");

            //  发送信息到服务器
            var userInfo = {
                status : 1,
                msg : "测试...",
                room_id : room_id,
                uid : uid,
                username: username,
                type : "1",
                data : "XXXXXXX",
            }
            var messageJson = JSON.stringify(userInfo);
            ws.send(messageJson);
        };
        //接收到消息时触发
        ws.onmessage = function(evt) {
            console.log("服务器消息: " + evt);

            addList(evt.data)
        };
        //连接关闭时触发
        ws.onclose = function(evt) {
            console.log("连接关闭.");
        };

    }



    $(function () {
        $("#send").on("click", function () {
            var send_text = $("#send_msg").val();

            if(send_text){
                //  发送信息到服务器
                var userInfo = {
                    status : 1,
                    msg : send_text,
                    room_id : room_id,
                    uid : uid,
                    username: username,
                    type : "3",
                    data : "XXXXXXX",
                }
                var messageJson = JSON.stringify(userInfo);
                ws.send(messageJson);
            }
        })

        $("#create").on("click", function () {
            $.ajax({
                type : "GET",
                dataType : 'json',
                url : "http://localhost:8889/ws/v1/createRoom",
                // data: data,
                success: function(res){
                    room_id = res.data.Id;
                    uid = $("#uid").val();
                    username = $("#username").val();
                    socket(room_id, uid, username);
                    console.log("创建成功..");

                }
            });
        })
    });

    function addList(msg) {
        var html = '<li>'+msg+'</li>';
        $("#msg_list").append(html)
    }

    $("#add").on("click", function () {
        room_id = $("#add_id").val();
        if(!room_id){
            alert("请输入聊天室ID"+room_id)
        }
        uid = $("#uid").val();
        username = $("#username").val();
        socket(room_id, uid, username);
    });

</script>